<template>
    <div>
        <div class="work-header">
            <a-avatar :src="store.user?.avatar" :size="72"></a-avatar>
            <div class="center">
                <p>早安, {{ store.user?.account }}, 开始您一天的工作吧</p>
                <p>今日晴, 20℃ - 32℃</p>
            </div>
            <div class="right">
                <p>待办</p>
                <p>2/10</p>
            </div>
            <div class="right">
                <p>公告</p>
                <p>8</p>
            </div>
            <div class="right">
                <p>帖子</p>
                <p>300</p>
            </div>
        </div>
        <a-row style="padding: 16px">
            <a-col class="gutter-row" :span="16">
                <a-card title="最新动态" style="margin-right: 16px">
                    <template #extra>
                        <a-button type="link" size="small">更多</a-button>
                    </template>
                    <a-list item-layout="horizontal" :data-source="dynamicInfoItems">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <a-list-item-meta>
                                    <template #description>
                                        {{ item.date }}
                                    </template>
                                    <template #title> {{ item.name }} <span v-html="item.desc"> </span> </template>
                                    <template #avatar>
                                        <a-avatar :src="item.avatar" :size="30" />
                                    </template>
                                </a-list-item-meta>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-card>
            </a-col>
            <a-col class="gutter-row phone-css" :span="8">
                <a-card title="日历">
                    <div :style="{ width: '100%', border: '1px solid #d9d9d9', borderRadius: '4px' }">
                        <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
                    </div>
                </a-card>
                <a-card title="访问来源" style="margin-top: 8px">
                    <a-empty />
                </a-card>
            </a-col>
        </a-row>
        <div class="work-dynamic"></div>
    </div>
</template>
<script setup lang="ts">
import { useUserStore } from '@/stores';
import { list as dynamicInfoItems } from './data'
import type { Dayjs } from 'dayjs'
const store = useUserStore()
const value = ref<Dayjs>()
const onPanelChange = (value: Dayjs, mode: string) => {
    console.log(value, mode)
};

</script>
<style lang="less" scoped>
.work-header {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    border-top: 1px solid #e4e4e4;
    align-items: center;

    .center {
        flex: 1;
        padding-left: 20px;

        p {
            &:first-child {
                font-size: 20px;
            }

            &:last-child {
                color: #666;
            }
        }
    }

    .right {
        width: 80px;
        padding: 10px;
        text-align: right;

        p {
            &:first-child {
                color: #666;
            }

            &:last-child {
                font-size: 20px;
            }
        }
    }

    p {
        margin: 0;
    }
}

.work-dynamic {
    display: flex;
}

/* 手机端样式 */
@media (max-width: 767px) {
    .phone-css {
        display: none;
    }
}
</style>
